<template>
	<view>
		<view v-show="isAgree">
			<view class="homepage-view">
				<u-navbar :border-bottom="false" :background="{backgroundColor: 'transparent'}" back-icon-color="#FFFFFF">
					<view class="homepage-navigation-view">
						{{dataModel.orgName}}
					</view>
				</u-navbar>
				<view class="homepage-enter-view" @click="clickHomepageEnterView">
					进入个人园林
				</view>
				<view class="homepage-top-view">
					<view class="homepage-top-detail-view">
						<view class="homepage-top-detail-top-view">
							可用能量(g)
						</view>
						<view class="homepage-top-detail-middle-view">
							{{dataModel.totalUsableEnergy}}
						</view>
						<view class="homepage-top-detail-bottom-view">
							<homepage-cell class="homepage-top-detail-bottom-top-view" title1="总能量" title2="获得证书" :value1="(dataModel.totalEnergy ? dataModel.totalEnergy/1000:0) + 'kg'"
							 :value2="(dataModel.totalCertificateNum||0) + '个'">

							</homepage-cell>
							<homepage-cell class="homepage-top-detail-bottom-middle-view" title1="种植消耗能量" title2="已种植" :value1="(dataModel.totalPlantEnergy||0) + 'g'"
							 :value2="(dataModel.totalPlantNum||0) + '棵'">

							</homepage-cell>
							<homepage-cell class="homepage-top-detail-bottom-bottom-view" title1="守护消耗能量" title2="当前年守护" :value1="(dataModel.totalGuardEnergy||0) + 'g'"
							 :value2="(dataModel.guardNum||0) + '棵'">

							</homepage-cell>
						</view>
					</view>
				</view>
				<view class="homepage-bottom-view">
					<view class="homepage-bottom-detail-view">
						<view class="homepage-bottom-detail-top-view">
							<view class="homepage-bottom-detail-top-left-view">
								共{{dataModel.personNum}}名成员
							</view>
							<view class="homepage-bottom-detail-top-right-view" @click="clickHomepageBottomDetailTopRightView">
								查看成员信息
							</view>
						</view>
						<u-subsection :animation="false" @change="changeSubsection" class="homepage-bottom-detail-subsection-view" :list="list"
						 mode="subsection" active-color="#488EF5"></u-subsection>
						<swiper class="homepage-bottom-detail-swiper-view" :current="swiperCurrent" :disable-touch="true" duration="0">
							<swiper-item>
								<u-tabs-swiper :current="leftCurrent" activeColor="#488EF5" :list="detailList" @change="leftChange" :is-scroll="false">

								</u-tabs-swiper>
								<swiper class="homepage-bottom-detail-swiper-detail-view" :current="leftSwiperCurrent" :disable-touch="true"
								 duration="0">
									<swiper-item>
										<u-cell-item v-for="(item, index) in rankList1" :key="index" class="homepage-cell-view" :border-bottom="false"
										 :border-top="true" :arrow="false" hover-class="none" :title="item.orgName" :value="item.avgEnergy?item.avgEnergy+'g':0 + 'g'"
										 :title-style="{'color': '#333333', 'margin-left': '20rpx'}" :value-style="{'color': '#333333'}">
											<view slot="icon">
												<view v-if="index <= 2">
													<u-image width="40rpx" height="40rpx" mode="aspectFit" :src="index == 0 ? '/static/img/loveforest/number_one.png' : index == 1 ? '/static/img/loveforest/number_two.png' : '/static/img/loveforest/number_three.png'"></u-image>
												</view>
												<view v-else>
													<view v-if="index == 3">
														<view class="swiper-item-cell-view">4</view>
													</view>
													<view v-else>
														<view class="swiper-item-cell-view">5</view>
													</view>
												</view>
											</view>
										</u-cell-item>
									</swiper-item>
									<swiper-item>
										<u-cell-item v-for="(item, index) in rankList2" :key="index" class="homepage-cell-view" :border-bottom="false"
										 :border-top="true" :arrow="false" hover-class="none" :title="item.orgName" :value="item.totalEnergy ? item.totalEnergy+'g':0 + 'g'"
										 :title-style="{'color': '#333333', 'margin-left': '20rpx'}" :value-style="{'color': '#333333'}">
											<view slot="icon">
												<view v-if="index <= 2">
													<u-image width="40rpx" height="40rpx" mode="aspectFit" :src="index == 0 ? '/static/img/loveforest/number_one.png' : index == 1 ? '/static/img/loveforest/number_two.png' : '/static/img/loveforest/number_three.png'"></u-image>
												</view>
												<view v-else>
													<view v-if="index == 3">
														<view class="swiper-item-cell-view">4</view>
													</view>
													<view v-else>
														<view class="swiper-item-cell-view">5</view>
													</view>
												</view>
											</view>
										</u-cell-item>
									</swiper-item>
								</swiper>
							</swiper-item>
							<swiper-item>
								<u-tabs-swiper :current="rightCurrent" activeColor="#488EF5" :list="detailList" @change="rightChange"
								 :is-scroll="false">

								</u-tabs-swiper>
								<swiper class="homepage-bottom-detail-swiper-detail-view" :current="rightSwiperCurrent" :disable-touch="true"
								 duration="0">
									<swiper-item>
										<u-cell-item v-for="(item, index) in rankList3" :key="index" class="homepage-cell-view" :border-bottom="false"
										 :border-top="true" :arrow="false" hover-class="none" :title="item.orgName" :value="item.avgEnergy?item.avgEnergy+'g':0 + 'g'"
										 :title-style="{'color': '#333333', 'margin-left': '20rpx'}" :value-style="{'color': '#333333'}">
											<view slot="icon">
												<view v-if="index <= 2">
													<u-image width="40rpx" height="40rpx" mode="aspectFit" :src="index == 0 ? '/static/img/loveforest/number_one.png' : index == 1 ? '/static/img/loveforest/number_two.png' : '/static/img/loveforest/number_three.png'"></u-image>
												</view>
												<view v-else>
													<view v-if="index == 3">
														<view class="swiper-item-cell-view">4</view>
													</view>
													<view v-else>
														<view class="swiper-item-cell-view">5</view>
													</view>
												</view>
											</view>
										</u-cell-item>
									</swiper-item>
									<swiper-item>
										<u-cell-item v-for="(item, index) in rankList4" :key="index" class="homepage-cell-view" :border-bottom="false"
										 :border-top="true" :arrow="false" hover-class="none" :title="item.orgName" :value="item.totalEnergy?item.totalEnergy+'g': 0 + 'g'"
										 :title-style="{'color': '#333333', 'margin-left': '20rpx'}" :value-style="{'color': '#333333'}">
											<view slot="icon">
												<view v-if="index <= 2">
													<u-image width="40rpx" height="40rpx" mode="aspectFit" :src="index == 0 ? '/static/img/loveforest/number_one.png' : index == 1 ? '/static/img/loveforest/number_two.png' : '/static/img/loveforest/number_three.png'"></u-image>
												</view>
												<view v-else>
													<view v-if="index == 3">
														<view class="swiper-item-cell-view">4</view>
													</view>
													<view v-else>
														<view class="swiper-item-cell-view">5</view>
													</view>
												</view>
											</view>
										</u-cell-item>
									</swiper-item>
								</swiper>
							</swiper-item>
						</swiper>
						<view class="homepage-bottom-detail-more-view" @click="clickHomepageBottomDetailMoreView">
							查看更多
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="!isAgree">
			<view class="prologue-view">
				<u-navbar :border-bottom="false" back-icon-color="#333333" title="自愿减排协议" title-color="#333333"></u-navbar>
				<view class="prologue-background-view">
					<view class="prologue-background-detail-view">
						<p>
							爱森是天津荣程祥泰投资控股集团有限公司（以下简称“荣程集团”或“我们”）和公益机构合作在“iSynergy”客户端中推出的产品，通过鼓励用户进行低碳行为完成种树，用以改善环境。若您通过页面点击确认或以其他方式选择接受《爱森用户使用须知》（以下简称“本须知”），即表示您自愿加入荣程集团减排项目及接受本须知的约定内容。
						</p>
						<p>
							您通过使用特定服务的低碳行为将产生绿色能量，如：行走捐、线下支付、生活缴费、网购火车票、预约挂号、ETC缴费等。此外，在您另行同意的情况下，您的其他低碳行为也可以产生绿色能量（如：您选择开通“iSynergy”账号后，在打卡下班后可以产生绿色办公能量），您可以在您的“碳足迹”当中了解可以产生绿色能量的项目。您理解并同意荣程集团旗下天津融和互联高新技术有限公司或您授权的其他主体将您的低碳行为转化为绿色能量，并在爱森进行展示，以便您了解并收取您的绿色能量。同时，您可以邀请您的好友加入爱森，共同改善环境。森林好友可以与您进行互动，如：互相收取能量、浇水、合种等，参与绿色能量好友排行榜，并了解您的森林动态及植树证书。您可以通过设置，向好友隐藏单个绿色能量球的具体数值。同时，请您理解，当您查看其他好友的森林动态时，除非您与相关互动人为支付宝好友，否则，您仅可查看匿名动态。在您完成虚拟种树后，荣程集团将根据您在爱森当中提交的种树申请，和公益机构一起种植真实的树木。当您达到有关部门（如：全国绿化委员会）规定的植树标准时，您可以在爱森相关服务页面领取并查看对应的植树证书（如：全民义务植树尽责电子证书）。届时，有关部门将依据您的支付宝账户对应的姓名为您颁发植树证书。
						</p>
						<p>
							为不断丰富您的使用体验，爱森将不时与第三方开展合作，推出定制化服务。您可以自主选择是否使用前述服务，当您使用相应的服务时，请遵循相关服务规则。请您理解，前述服务是爱森与合作方的定制化合作，因此相关功能可能与“iSynergy”客户端的爱森相关功能存在一定差异，具体请您查阅相应的服务规则。此外，针对前述定制化服务的某些功能入口、植树证书与地图等内容可能暂不能在“iSynergy”客户端的爱森内兼容展示，对此，我们将进行持续完善与更新。
						</p>
						<p>
							您参与爱森应遵循诚信、非营利原则，您可以在“爱森种树攻略”中了解到可以获得绿色能量的途径。请您理解，森林中的绿色能量无法转让或继承。若您存在购买或出售绿色能量或浇水服务，通过虚假合种、虚假绿色出行、虚假交易等违反诚信的方式获取绿色能量，或存在将爱森产品或服务用于其他商业用途的不当行为，我们将会扣除您因此获得的绿色能量（如有），同时还可能对您采取限制或禁止使用爱森全部或部分服务等处理措施。
						</p>
						<p>
							为了更好地向您提供服务，便于您及时了解森林动态，爱森将通过生活号、小程序等“iSynergy”客户端信息渠道及相关页面向您展示服务信息以及发送通知信息（如：动态提醒、统计信息）。同时，为使您的体验更加生动，爱森会根据您在“iSynergy”客户端设置的地区信息，为您展示对应的天气情况。您也可以在“爱森-设置”中选择关闭天气信息的展示。
						</p>
						<p>
							您可以选择关闭爱森。请您理解，关闭时，您届时尚未兑换的绿色能量将被清空，在“iSynergy”客户端爱森中已参与的合种将即时退出。在“iSynergy”客户端爱森中，您的好友将不会再看到您的森林信息，同时您的低碳行为将不会再产生绿色能量。考虑到公益机构已经种植真实的树木，您理解并同意蚂蚁集团保留您在爱森的植树记录。您重新进入爱森时，可以再次查看您在开通爱森期间的大树养成记录。
						</p>
						<p>
							为了进一步改善用户体验，爱森将会持续开发新服务，为用户提供版本升级、功能升级等服务和内容更新，本须知也可能会随之更新，更新内容将于公布之日起生效。若您选择继续使用爱森，表示您同意更新后的内容。若您不同意更新后的条款内容，您有权停止使用相关服务；双方协商一致的，也可另行变更相关服务和对应条款内容。如果更新的内容涉及您的主要权利或责任，我们会以公告、客户端通知或短信等方式向您进行提示，您也可以随时在“设置-用户使用须知”页面查阅本须知的最新版本。
						</p>
					</view>
					<u-checkbox class="prologue-background-checkbox-view" shape="circle" @change="checkboxChange" v-model="canClick">
						同意遵守《自愿减排协议》内容
					</u-checkbox>
					<u-button @click="clickPrologueBackgroundButtonView" class="prologue-background-button-view" shape="circle" type="primary"
					 :disabled="!canClick">
						确认
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import homepageCell from './homepage_cell.vue'
	export default {
		components: {
			homepageCell
		},
		data() {
			return {
				dataModel: {},
				isAgree: true,
				canClick: false,
				swiperCurrent: 0,
				rankList1: [],
				rankList2: [],
				rankList3: [],
				rankList4: [],
				list: [{
						name: '集团公司排名'
					},
					{
						name: '公司部门排名'
					}
				],
				detailList: [{
						name: '人均能量排名'
					},
					{
						name: '总能量排名'
					}
				],
				leftCurrent: 0,
				rightCurrent: 0,
				leftSwiperCurrent: 0,
				rightSwiperCurrent: 0
			}
		},
		onPullDownRefresh() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})
			this.init()
		},
		onLoad() {
			this.$u.api.forestAuthorize().then(res => {
				this.isAgree = res&&res.code===200 ? false : res
			})
			this.init()
		},
		methods: {
			init(){
				uni.stopPullDownRefresh()
				this.$u.api.companyInfo().then(res => {
					this.dataModel = res
				}).catch(err => {
					console.log(err)
				})
				
				this.$u.api.energySortList({
					'interfaceType': 2,
					currentPage: 1,
					pageSize: 10,
				}).then(res => {
					var j = 0
					if (res.list.length < 5) {
						j = res.list.length
					} else {
						j = 5
					}
					for (var i = 0; i < j; i++) {
						var k = res.list[i]
						this.rankList1.push(k)
					}
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
				this.$u.api.energySortList({
					'interfaceType': 1,
					currentPage: 1,
					pageSize: 10
				}).then(res => {
					var j = 0
					if (res.list.length < 5) {
						j = res.list.length
					} else {
						j = 5
					}
					for (var i = 0; i < j; i++) {
						var k = res.list[i]
						this.rankList2.push(k)
					}
				}).catch(err => {
					console.log(err)
				})
				this.$u.api.energySortList({
					'interfaceType': 4,
					currentPage: 1,
					pageSize: 10,
				}).then(res => {
					var j = 0
					if (res.list.length < 5) {
						j = res.list.length
					} else {
						j = 5
					}
					for (var i = 0; i < j; i++) {
						var k = res.list[i]
						this.rankList3.push(k)
					}
				}).catch(err => {
					console.log(err)
				})
				this.$u.api.energySortList({
					'interfaceType': 3,
					currentPage: 1,
					pageSize: 10,
				}).then(res => {
					var j = 0
					if (res.list.length < 5) {
						j = res.list.length
					} else {
						j = 5
					}
					for (var i = 0; i < j; i++) {
						var k = res.list[i]
						this.rankList4.push(k)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			clickPrologueBackgroundButtonView() {
				// uni.setStorageSync("loveforest_isAgree",true)
				// this.isAgree = true
				this.$u.api.getForestAuthorize().then(res => {
					uni.setStorageSync("loveforest_isAgree",true)
					this.isAgree = true
				}).catch(err => {
					// this.isAgree = true
				})
			},
			checkboxChange(e) {
				this.canClick = e.value
			},
			clickHomepageBottomDetailTopRightView() {
				this.$u.route({
					url: 'pages/work/apply/loveforest/member_information/member_information'
				})
			},
			changeSubsection(e) {
				this.swiperCurrent = e
			},
			clickHomepageBottomDetailMoreView() {
				this.$u.route({
					url: 'pages/work/apply/loveforest/ranking_list/ranking_list'
				})
			},
			leftChange(e) {
				this.leftCurrent = e
				this.leftSwiperCurrent = e
			},
			rightChange(e) {
				this.rightCurrent = e;
				this.rightSwiperCurrent = e
			},
			clickHomepageEnterView() {
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/personal_garden'
				})
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	.homepage-view {
		height: 1932rpx;
		background: url(../../../../static/img/loveforest/homepage_background.png) no-repeat;
		background-size: cover;

		.homepage-navigation-view {
			width: 600rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.homepage-enter-view {
			width: 210rpx;
			height: 70rpx;
			border-color: #FFFFFF;
			border-style: solid;
			border-width: 2rpx;
			position: fixed;
			right: -2rpx;
			top: calc(constant(safe-area-inset-top) + 60px);
			// top: calc(env(safe-area-inset-top) + 44px);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 30rpx;
			background-image: linear-gradient(to right, #AFE167, #57B481);
			border-radius: 35rpx 0rpx 0rpx 35rpx;
			z-index: 1000;
		}

		.homepage-top-view {
			height: calc(828rpx - constant(safe-area-inset-top) - 44px);
			height: calc(828rpx - env(safe-area-inset-top) - 44px);
			margin-top: 70rpx;
			padding: 35rpx;

			.homepage-top-detail-view {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				height: 100%;
				padding: 35rpx;
				display: flex;
				flex-direction: column;

				.homepage-top-detail-top-view {
					height: 60rpx;
					display: flex;
					flex-shrink: 0;
					justify-content: center;
					align-items: flex-start;
					font-weight: bold;
					font-size: 32rpx;
				}

				.homepage-top-detail-middle-view {
					height: 80rpx;
					display: flex;
					flex-shrink: 0;
					justify-content: center;
					align-items: flex-start;
					font-weight: bold;
					font-size: 38rpx;
					color: #488EF5;
					letter-spacing: 20rpx;
				}

				.homepage-top-detail-bottom-view {
					flex-grow: 1;
					border-radius: 20rpx;
					background-color: #F4F6F9;
					display: flex;
					flex-direction: column;
					padding-top: 30rpx;
					padding-left: 35rpx;
					padding-bottom: 30rpx;

					.homepage-top-detail-bottom-top-view {
						flex-grow: 1;
					}

					.homepage-top-detail-bottom-middle-view {
						flex-grow: 1;
					}

					.homepage-top-detail-bottom-bottom-view {
						flex-grow: 1;
					}
				}
			}
		}

		.homepage-bottom-view {
			padding: 0rpx 35rpx;
			height: calc(999rpx - constant(safe-area-inset-bottom));
			height: calc(999rpx - env(safe-area-inset-bottom));

			.homepage-bottom-detail-view {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				height: 100%;

				.homepage-bottom-detail-top-view {
					height: 100rpx;
					border-bottom: 10rpx solid #F5F5F5;
					display: flex;
					padding: 0rpx 35rpx;
					align-items: center;
					justify-content: space-between;

					.homepage-bottom-detail-top-left-view {}

					.homepage-bottom-detail-top-right-view {
						color: #488EF5;
					}
				}

				.homepage-bottom-detail-subsection-view {
					margin: 35rpx;
				}

				.homepage-bottom-detail-swiper-view {
					height: calc(669rpx - constant(safe-area-inset-bottom));
					height: calc(669rpx - env(safe-area-inset-bottom));

					.homepage-bottom-detail-swiper-detail-view {
						height: calc(589rpx - constant(safe-area-inset-bottom));
						height: calc(589rpx - env(safe-area-inset-bottom));

						.homepage-cell-view {
							height: calc((589rpx - constant(safe-area-inset-bottom)) / 5);
							height: calc((589rpx - env(safe-area-inset-bottom)) / 5);

							.swiper-item-cell-view {
								width: 40rpx;
								height: 40rpx;
								color: #333333;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}

				.homepage-bottom-detail-more-view {
					height: 90rpx;
					border-top: 2rpx solid #F5F5F5;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #488EF5;
				}
			}
		}
	}

	.prologue-view {
		height: 100vh;
		background-color: #F7F7F7;
		display: flex;

		.prologue-background-view {
			flex-grow: 1;
			margin-top: calc(constant(safe-area-inset-top) + 44px + 40rpx);
			margin-top: calc(env(safe-area-inset-top) + 44px + 40rpx);
			margin-left: 40rpx;
			margin-right: 40rpx;
			margin-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
			margin-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
			background-color: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;

			.prologue-background-detail-view {
				border-color: #D5D5D5;
				border-style: solid;
				border-width: 2rpx;
				flex-grow: 1;
				overflow-y: auto;
				margin: 40rpx;
				background-color: #F7F7F7;
				text-indent: 60rpx;
				font-size: 30rpx;
			}

			.prologue-background-checkbox-view {
				flex-shrink: 0;
				margin: 0rpx 40rpx;
			}

			.prologue-background-button-view {
				flex-shrink: 0;
				margin: 40rpx;
			}
		}
	}
</style>
